<template>
    <section :style="{ backgroundColor: itemConfig.bgColor }">
        <div class="max-w-[1200px] mx-auto px-5">
            <div class="flex items-center py-7">
                <el-image
                    v-if="itemConfig.loginImage"
                    :src="appStore.toAbsoluteUrl(itemConfig.loginImage)"
                    :lazy="true"
                    class="shrink-0 w-[120px] h-[50px] mr-8"
                />

                <div class="flex-1 place-self-start mr-8">
                    <div v-if="itemData.length > 0" class="flex gap-8">
                        <template v-for="(item, index) in (itemData as itemDataType[])">
                            <nuxt-link
                                v-if="item.isEnable"
                                :key="index"
                                class="cursor-pointer text-xl hover:opacity-80"
                                :style="{ color: itemConfig.linkColor }"
                                @click="handleJump(item)"
                            >
                                {{ item.name }}
                            </nuxt-link>
                        </template>
                    </div>

                    <p
                        v-if="itemConfig.description"
                        class="mt-5 text-lg leading-7"
                        :style="{ color: itemConfig.descColor }"
                    >
                        {{ itemConfig.description }}
                    </p>
                </div>

                <div class="flex items-center gap-10">
                    <div v-if="itemConfig.imgUrlOne">
                        <el-image
                            :src="appStore.toAbsoluteUrl(itemConfig.imgUrlOne)"
                            class="w-[130px] h-[130px] rounded-sm"
                            :alt="itemConfig.imgNameOne"
                            :lazy="true"
                        />
                        <p class="text-center" :style="{ color: itemConfig.someColor }">
                            {{ itemConfig.imgNameOne }}
                        </p>
                    </div>
                    <div v-if="itemConfig.imgUrlTow">
                        <el-image
                            :src="appStore.toAbsoluteUrl(itemConfig.imgUrlTow)"
                            class="w-[130px] h-[130px] rounded-sm"
                            :alt="itemConfig.imgNameTow"
                            :lazy="true"
                        />
                        <p class="text-center" :style="{ color: itemConfig.someColor }">
                            {{ itemConfig.imgNameTow }}
                        </p>
                    </div>
                </div>
            </div>

            <div
                class="leading-[70px] text-center border-t border-dashed"
                :style="{
                    color: itemConfig.rigsColor,
                    borderColor: itemConfig.brColor
                }"
            >
                {{ website.copyright }}
                <nuxt-link
                    v-if="website.icp"
                    class="mx-2 cursor-pointer hover:opacity-80"
                    :external="true"
                    target="_black"
                    to="https://beian.miit.gov.cn"
                >
                    {{ website.icp }}
                </nuxt-link>

                <nuxt-link
                    v-if="website.pcp"
                    class="mx-2 cursor-pointer hover:opacity-80"
                    :external="true"
                    target="_black"
                    to="https://beian.mps.gov.cn"
                >
                    {{ website.pcp }}
                </nuxt-link>
            </div>
        </div>
    </section>
</template>

<script setup lang="ts">
import { popupEnum } from '~/enums/app'
import useAppStore from '~/stores/app'
import useUserStore from '~/stores/user'
import validateUtil from '~/utils/validate'

interface itemConfigType {
    isShowRigs: boolean;
    loginImage: string;
    imgUrlOne: string;
    imgUrlTow: string;
    imgNameOne: string;
    imgNameTow: string;
    description: string;
    bgColor: string;
    brColor: string;
    rigsColor: string;
    linkColor: string;
    descColor: string;
    someColor: string;
}

interface itemDataType {
    name: string;
    isLogin: boolean;
    isEnable: boolean;
    link: any;
}

withDefaults(
    defineProps<{
        itemConfig?: itemConfigType,
        itemData?: itemDataType[]
    }>(),
    {
        itemConfig: {} as itemConfigType | any,
        itemData: [] as itemDataType[] | any
    }
)

const router = useRouter()
const appStore = useAppStore()
const userStore = useUserStore()

const website = computed<AppConfigWebsite>(() => appStore.getWebsiteConfig)

const handleJump = (item: itemDataType) => {
    if (!userStore.isLogin && item.isLogin) {
        return appStore.setPopup(popupEnum.LOGIN)
    }

    if (item.link?.path) {
        if (validateUtil.isExternal(item.link?.path)) {
            window.open(item.link?.path, '_blank')
        } else {
            router.push({
                path: item.link?.path,
                query: item.link?.query
            })
        }
    }
}
</script>
